<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .div1 {
            position: relative;
            text-align: center;
            width: 400px;
            height: 40px;
            /* border: 1px solid red; */
            margin: 10px auto;
            line-height: 40px;
            vertical-align: middle;
        }

        .div2 {
            text-align: center;
            margin: 10px auto;
            width: 400px;
            height: 40px;
            /* border: 1px solid red; */
            line-height: 40px;
            vertical-align: middle;
            text-align: center;
        }

        .div3 {
            margin: 10px auto;
            width: 600px;
            height: 600px;
            /* border: 1px solid red; */
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: center;

        }

        .fonts {
            margin: 10px;
            width: 70px;
            height: 70px;
            
            font-size: 22px;
            text-align: center;
            line-height: 70px;
            vertical-align: middle;
            border-radius: 30%;
            background-color: coral;
            color: white;
            font-weight: 800;
            
        }

        .div1 button {
            position: absolute;
            right: 0;
            top: 0;
            height: 40px;
            width: 60px;
            border: none;
            /* background-color: #fff; */
        }
    </style>
</head>

<body>

    <div class="div1">
        <p></p>
        <button>换一个</button>
    </div>
    <div class="div2">

    </div>
    <div class="div3">

    </div>
    <script>
        let div3 = document.querySelector('.div3');
        for (let i = 0; i < 36; i++) {
            div3.innerHTML += '<div class="fonts"></div>'
        }
        let arr = ['瓜田李下', '掩耳盗铃', '魑魅魍魉', '愚公移山', '水木年华', '风声鹤唳', '妄自菲薄', '厚德载物', '亡羊补牢'];
        // console.log(arr[0].split(''));
        let str = '';
        str += arr.join('');
        let fontsArr = str.split('')
        let fonts = document.querySelectorAll('.fonts');
        randomFont();
        function randomFont() {
            let fontsArr2 = fontsArr.slice();
            for (let i = 0; i < fontsArr.length; i++) {
                let random = Math.floor(Math.random() * fontsArr2.length);
                let font = fontsArr2.splice(random, 1)
                // console.log(font);
                fonts[i].innerText = font[0];
            }
        }
        let index = 0;
        function nextPhrase() {
            let div1 = document.querySelector('.div1 > p')
            div1.innerHTML = `${arr[index++]}`
            let btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                div1.innerHTML = `${arr[index++]}`;
                randomFont();
                if (index > 8) {
                    index = 0;
                }
                document.querySelector('.div2').innerText =''
            })
        }
        nextPhrase();
        let div2 = document.querySelector('.div2');
        for (let i = 0; i < fonts.length; i++) {
            fonts[i].addEventListener('click', function (e) {
                console.log(e.path[0].childNodes[0].data[0]);
                div2.innerText += e.path[0].childNodes[0].data[0]
                let length = document.querySelector('.div2').innerText.length;
                if (length == 4) {
                    let text1 = document.querySelector('.div1 > p').innerText;
                    let text2 = document.querySelector('.div2').innerText;
                    setTimeout(function(){
                        if (text1 == text2) {
                        alert('答对了');
                        randomFont()
                        nextPhrase()
                        document.querySelector('.div2').innerText =''
                    } else {
                        alert('再接再厉');
                        randomFont()
                        document.querySelector('.div2').innerText =''
                    }
                    },100)
                }
            })

        }
    </script>
</body>

</html>